<template>
  <!-- loading -->
  <el-button type="primary" @click="showLoading">loading显示和隐藏</el-button>
  <!-- 表格 -->
  <BasicTable
    :table-data="paginatedData"
    :loading="loading"
    :total="tableData.length"
    :current-page="currentPage"
    :page-size="pageSize"
    @handle-size-change="handlePageSizeChange"
    @handle-current-page-change="handleCurrentPageChange"
  >
    <el-table-column
      v-for="column in tableColumns"
      :key="column.prop"
      :prop="column.prop"
      :label="column.label"
      :fixed="column.fixed"
      :width="column.width"
    >
      <template v-if="column.prop === 'status'" #default="{ row }">
        <el-tag :type="row.status === '在职' ? 'success' : 'danger'">{{
          row.status
        }}</el-tag>
      </template>
      <template v-else-if="column.prop === 'operations'" #default="{ row }">
        <el-button link type="primary" size="small" @click="handleEdit(row)"
          >编辑</el-button
        >
        <el-button link type="primary" size="small" @click="handleDelete(row)"
          >删除</el-button
        >
      </template>
    </el-table-column>
  </BasicTable>
  <el-dialog v-model="dialogVisible" title="编辑用户信息" width="30%">
    <el-form
      ref="editForm"
      :model="editFormData"
      label-width="80px"
      :rules="rules"
    >
      <template v-for="(item, index) in formColumns" :key="index">
        <el-form-item :label="item.label" :prop="item.prop">
          <!-- 检查当前项是否是 'date'，根据需要添加 'disabled' 属性 -->
          <el-input
            v-if="item.prop !== 'sex' && item.prop !== 'status'"
            v-model="editFormData[item.prop]"
            :disabled="item.prop === 'date'"
          ></el-input>

          <el-radio-group
            v-if="['sex', 'status'].includes(item.prop)"
            v-model="editFormData[item.prop]"
          >
            <el-radio
              v-for="(option, optionIndex) in item.options"
              :key="optionIndex"
              :label="option"
              >{{ option }}</el-radio
            >
          </el-radio-group>
        </el-form-item>
      </template>
      <el-form-item>
        <el-button type="primary" @click="saveEdit(editForm)">保存</el-button>
        <el-button @click="cancelEdit">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script setup>
import BasicTable from './table.vue'
import { ref, computed, reactive } from 'vue'
const dialogVisible = ref(false)
const editFormData = ref({})
const editForm = ref({})
const generateTableData = () => {
  const data = []

  for (let i = 1; i <= 10; i++) {
    data.push({
      index: `${i}`,
      date: '2024-01-08',
      name: `User ${i}`,
      sex: i % 2 === 0 ? '男' : '女',
      mobile: `123456789${i}`,
      dept: `Department ${i}`,
      status: i % 2 === 0 ? '在职' : '离职',
      ctTime: `2024-01-08 10:${i < 10 ? '0' : ''}${i}:00`,
      address: `Address ${i}`,
    })
  }
  return data
}

const tableData = ref(generateTableData())
const tableColumns = [
  { prop: 'index', label: '序号' },
  { prop: 'date', label: '入职日期' },
  { prop: 'name', label: '姓名' },
  { prop: 'sex', label: '性别' },
  { prop: 'mobile', label: '手机号' },
  { prop: 'dept', label: '部门' },
  { prop: 'status', label: '状态' },
  { prop: 'ctTime', label: '创建时间' },
  { prop: 'address', label: '地址' },
  { prop: 'operations', label: '操作', fixed: 'right', width: '120' },
]
const formColumns = [
  { prop: 'date', label: '入职日期' },
  { prop: 'name', label: '姓名' },
  { prop: 'sex', label: '性别', options: ['男', '女'] },
  { prop: 'mobile', label: '手机号' },
  { prop: 'dept', label: '部门' },
  { prop: 'status', label: '状态', options: ['在职', '离职'] },
  { prop: 'ctTime', label: '创建时间' },
  { prop: 'address', label: '地址' },
]
const loading = ref(false)
const currentPage = ref(1)
const pageSize = ref(5)

/**规则 */
const rules = reactive({
  mobile: [
    { required: true, message: '手机号必填', trigger: 'blur' },
    {
      pattern: /^1[3456789]\d{9}$/,
      message: '手机号码格式不正确',
      trigger: 'blur',
    },
  ],
})
const showLoading = () => {
  loading.value = true
  setTimeout(() => {
    loading.value = false
  }, 2000)
}

const paginatedData = computed(() => {
  const startIndex = (currentPage.value - 1) * pageSize.value
  const endIndex = startIndex + pageSize.value
  return tableData.value.slice(startIndex, endIndex)
})
const handlePageSizeChange = val => {
  pageSize.value = val
}

const handleCurrentPageChange = val => {
  currentPage.value = val
}
/**
 * 编辑
 * @param {*} row
 */
const handleEdit = row => {
  dialogVisible.value = true
  editFormData.value = { ...row }
}

/**
 * 删除
 * @param {*} row
 */
const handleDelete = row => {
  const index = tableData.value.indexOf(row)
  if (index !== -1) {
    tableData.value.splice(index, 1)
  }
  tableData.value.forEach((item, i) => {
    item.index = i + 1
  })
}
/**
 * 保存编辑
 */
const saveEdit = formEl => {
  if (!formEl) return
  formEl.validate((valid, fields) => {
    if (valid) {
      console.log('submit!')
      const index = tableData.value.findIndex(
        item => item.index === editFormData.value.index
      )
      if (index !== -1) {
        tableData.value.splice(index, 1, editFormData.value)
      }
      dialogVisible.value = false
    } else {
      console.log('error submit!', fields)
    }
  })
}

/**
 * 取消编辑
 */
const cancelEdit = () => {
  dialogVisible.value = false
}
</script>

<style lang="scss" scoped></style>
